{% extends "base.html" %}
{% block title %}
	首页
{% endblock %}
{% block banner%}
	<div id='banner'>
	    <div class="avatar"><a href="/blog/profile/"><span></span></a> </div>
	</div>
	{% if username != '' %}
		<div class='blog-btn'>
			<button><a href='/blog/add1/'>+文章</a></button>
		</div>
	{% else %}
		<div></div>
	{% endif %}
{% endblock %}

{% block container %}
	<div class="blog-view">
		<div class='blog-left'>
			<div id='blog-list-title'>
				<ul >
					<li><a href='/blog/list/type=blog/'><p>blog</p></a></li>
					<li><a href='/blog/list/type=new/'><p>最新</p></a></li>
					<!-- <div class='pop'><a href='/blog/list/type=pop'>最新</a></div>  -->
					<li><a href='/blog/list/type=last/'><p>最热</p></a></li>
				</ul>
			</div>

			{% for blog in blogs %}
			<div class='blog-info'>
				<div id='blog-title' style='height:50px;float:left;'>
					<h3><a href='/blog/article/{{blog.id}}/'>{{ blog.title }}</a></h3>
				</div>
				{% if blog.author.first_name != ''%}
					<div style='float:right;margin-right:10px;text-align:right;height:50px;'><h5>{{ blog.author.first_name }}{{blog.author.last_name}} {{ blog.timestamp }} 浏览({{ blog.clicktime}})</h5></div>
				{% else %}
					<div style='float:right;margin-right:10px;text-align:right;height:50px;'><h5>{{ blog.author }} {{ blog.timestamp }} 浏览({{ blog.clicktime}})</h5></div>
				{% endif %}
			</div>
			{% endfor %}

			<div class="pagination-all">
				<span class="step-links">
					 {% if blogs.has_previous %}
						 <a class='paginator' title='previous' href='?page=1'><span> 首页 </span></a>
				         <a class='paginator' title='previous' href='?page={{ blogs.previous_page_number }}'><span> 上一页 </span></a>

					 {% else %}
					 	<a class='paginator' title='previous' href='?page=1'><span> 首页 </span></a>
					 	<span> 上一页 </span>
					 {% endif %}
					 {% for page in pages_range %}
					     {% if page = blogs.number %}
					         <a class='paginator_current' title='current:{{ page }}'><span class='page'>{{ page }}</span></a>
					     {% else %}
					         <a class='paginator' href='?page={{ page }}' title='{{ page }}'><span class='page'>{{ page }}</span></a>
					     {% endif %}
					 {% endfor %}
					 {% if blogs.has_next%}
					     <a class='paginator' title='next' href='?page={{ blogs.next_page_number }}'><span>下一页</span></a>
					     <a class='paginator' title='previous' href='?page={{ blogs.paginator.num_pages }}'><span> 尾页 </span></a>

					 {% else %}
					 	 <span style='margin-left: 0px;'>下一页</span>
					 	 <a class='paginator' title='previous' href='?page={{ blogs.paginator.num_pages }}'><span> 尾页 </span></a>
					 {% endif %}
					 <!--
					 total pages
						 <p>
						 	{%if pages.paginator.num_pages%}
							 	<a  class='paginator' title='next' href='?page={{ blogs.paginator.num_pages }}'>
							 		{{ blogs.paginator.num_pages }} pages
							 	</a>
						 	{%endif%}
						 </p>
					  -->
				 </span>
			</div>
		</div>
		<div class='blog-right' style='margin-top:10px; border-left:2px solid rgba(141,59,181,0.5);'>
			<div id="pdata"></div>
			<div class='blog-list-right-title' style='border-bottom: 1px solid rgba(255,0,0,0.6);'>
				<p>文章分类</p>
			</div>
			<div id='blog-list-nav'>
				<ul style='padding-left: 0px; width:75%;margin-left: auto; margin-right:auto;' class='blog-list-ul'>
					{% for type in types %}
					{% if type.id > 6 %}
						<li></li>
					{% else %}
						<li value='{{ type.type}}' onclick='add_attri_href()' style='width: 40%;margin:1px 4px;'><a href='#'  target="_blank"><div id='div{{type.id}}' >{{ type.type}}</div></a></li>
					{% endif %}
					{% endfor %}
				</ul>
			</div>
			<div class='blog-list-right-title' style='border-bottom: 1px solid rgba(81,216,47,0.6);'><p>欣赏</p></div>
			<div id='blog-list-right-midd'>
				<ul class="blog-list-right-banner">
					{% for pic in pics %}
					<li><a href='/blog/pic/{{pic.id}}' target='view_window'><img alt='{{pic.title}}' src="/media/{{pic.first_pic}}" style='width:100%;height:100%;'></a></li>
					{% endfor%}
				 </ul>
			</div>
		</div>
	</div>

{% endblock %}
